<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/2.png);
				position: absolute;
				left:230px ;
				top: 40px;
				/* 堆叠z-index   针对所有的position定位*/
				z-index:2;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/3.png);
				background-size: 100%;
				position: absolute;
				left:255x ;
				top: -183px;
				z-index:1;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对与父元素定位
		         功能：单一元素定位，推荐
		position属性：relation；声明元素可以用相对定位意义
		     方向属性：left，right，top，bottom
			 堆叠顺序属性：z-index
			            属性值数值，数值越大，越靠前
			绝对定位  按照定位祖先【页面左上角】进行定位
			功能：脱离文档流,不占据原空间
		    方向属性与叠加属性和相对以及固定定位共用！
		position属性：absolute；声明文员可以使用绝对定位
		
		实际开发中：相对定位结合绝对定位一起使用
		          侧边栏，左栏，遮盖层
		 -->
		 <div>
			 <div></div>
			 <div></div>
		 </div>
	</body>
</html>